let myAjax = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP')
let nContent = document.querySelector('.nContent')
let hContent = document.querySelector('.hContent')
let new1 = document.querySelector('.new')
let hot = document.querySelector('.hot')
function loadPage() {
    nContent.style.display = 'block'
    hContent.style.display = 'none'
    new1.style.color = 'orange'
    hot.style.color = 'black'
    myAjax.open('get', 'http://localhost:3000/guid/new', true)
    myAjax.send()
    myAjax.onreadystatechange = function() {
        if(myAjax.readyState == 4 && myAjax.status == 200) {
            let res = JSON.parse(myAjax.responseText)
            console.log(res)
            showGuid(res, 'new')
        }else{
        }
    }
}
loadPage()
function showGuid(data, dom) {
    if(dom == 'new') {
        let nCon = document.querySelector('.nCon')
        nCon.innerHTML = ''
    }else{ 
        let hCon = document.querySelector('.hCon')
        hCon.innerHTML = ''
    }
    for(let i = 0; i < data.length; i++) {
        // 新建li、img、p、span、div
        let li = document.createElement('li')
        let img = document.createElement('img')
        let p = document.createElement('p')
        
        let div1 = document.createElement('div')
        let div2 = document.createElement('div')
        let img1 = document.createElement('img')
        let img2 = document.createElement('img')

        let span1 = document.createElement('span')
        let span2 = document.createElement('span')
        // 把img、p、span挂载到li上面
        img.src = data[i].img
        p.innerText = data[i].text
        span1.innerHTML = data[i].like
        span2.innerHTML = data[i].words
        li.appendChild(img)
        li.appendChild(p)
        img1.src = '../img/css/img/xinRedo.png'
        img2.src = '../img/css/img/reply.png'
        img1.style.width = '18px'
        img2.style.width = '18px'
        img1.style.marginRight = '5px'
        img2.style.marginRight = '5px'
        div1.appendChild(img1)
        div2.appendChild(img2)
        div1.appendChild(span1)
        div2.appendChild(span2)
        li.appendChild(div2)
        li.appendChild(div1)
        if(dom == 'new') {
            let nCon = document.querySelector('.nCon')
            nCon.appendChild(li)
        }else{ 
            let hCon = document.querySelector('.hCon')
            hCon.appendChild(li)
        }
    }
}
function showHot() {
    nContent.style.display = 'none'
    hContent.style.display = 'block'
    new1.style.color = 'black'
    hot.style.color = 'orange'
    myAjax.open('get', 'http://localhost:3000/guid/hot', true)
    myAjax.send()
    myAjax.onreadystatechange = function() {
        if(myAjax.readyState == 4 && myAjax.status == 200) {
            let res = JSON.parse(myAjax.responseText)
            console.log(res)
            showGuid(res)
        }else{
        }
    }
}